<%@ page language="java" contentType="text/html; charset=ISO-8859-1"
	pageEncoding="ISO-8859-1"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">

<head>
<script type="text/javascript" src="js/jquery-1.6.3.min.js"></script>
<script type="text/javascript" src="js/jquery.tablesorter.min.js"></script>
<script type="text/javascript" src="js/jquery.dateFormat-1.0.js"></script>
<title>Call Details</title>
<link rel="stylesheet" href="css/style.css" type="text/css"
	media="print, projection, screen" />
<script type="text/javascript">
var dict=new Object();
var output=[];
var months=['January', 'February', 'March', 'April', 'May', 'June', 'July', 'August', 'September', 'October', 'November', 'December'];
$(function() {
	$('#progress').show();
	$.getJSON('/main',function(data){
		$('#progress').hide();
		var currentDate=new Date();
		for(var i=0;i<data.length;i++) {
			var number=data[i].number;
			var name=data[i].name;
			var tdate=new Date(data[i].date);
			var cdate=$.format.date(tdate.toString(),'MMM dd,yyyy hh:mm:ss a');
			var duration=data[i].duration;
			var type=data[i].type;
			var calltype="Other";
			if(type == 1){
				calltype="Incoming";
			}
			if(type == 2){
				calltype="Outgoing";
			}
			if(type == 3){
				calltype="Missed";
			}

			var tmon=tdate.getMonth();
			var tyear=tdate.getFullYear();
			if(tmon==currentDate.getMonth() && tyear==currentDate.getFullYear()) {
				$("#tabbody").append('<tr><td>'+number+'</td><td>'+name+'</td><td>'+cdate+'</td><td>'+duration+'</td><td>'+calltype+'</td></tr>');
			} 

			if(!dict[tmon+"_"+tyear]){
				dict[tmon+"_"+tyear]=new Array();
				output.push('<option value="'+ tmon+"_"+tyear+'">'+ months[tmon] + "("+tyear +")"+'</option>');
			}
			dict[tmon+"_"+tyear].push(data[i]);
		}
		$('#monthselect').html(output.join(''));
		$("#mytable").tablesorter({widgets: ['zebra']});
		$("#monthselect").change(monthChanged);
	});
});

function monthChanged() {
	$( "#tabbody tr" ).remove();
	var selectedMonth=$('#monthselect').val();
	var data=dict[selectedMonth];
	for(var i=0;i<data.length;i++) {
		var number=data[i].number;
		var name=data[i].name;
		var tdate=new Date(data[i].date);
		var cdate=$.format.date(tdate.toString(),'MMM dd,yyyy hh:mm:ss a');
		var duration=data[i].duration;
		var type=data[i].type;
		var calltype="Other";
		if(type == 1){
			calltype="Incoming";
		}
		if(type == 2){
			calltype="Outgoing";
		}
		if(type == 3){
			calltype="Missed";
		}
		$("#tabbody").append('<tr><td>'+number+'</td><td>'+name+'</td><td>'+cdate+'</td><td>'+duration+'</td><td>'+calltype+'</td></tr>');
	}
	var usersTable = $(".tablesorter");
	usersTable.trigger("update").trigger("applyWidgets");
}
</script>
<%@page import="com.google.appengine.api.users.UserServiceFactory"%>
<%@page import="com.google.appengine.api.users.UserService"%>
<%
	UserService userService = UserServiceFactory.getUserService();
%>
<script type="text/javascript">

  var _gaq = _gaq || [];
  _gaq.push(['_setAccount', 'UA-25672122-1']);
  _gaq.push(['_trackPageview']);

  (function() {
    var ga = document.createElement('script'); ga.type = 'text/javascript'; ga.async = true;
    ga.src = ('https:' == document.location.protocol ? 'https://ssl' : 'http://www') + '.google-analytics.com/ga.js';
    var s = document.getElementsByTagName('script')[0]; s.parentNode.insertBefore(ga, s);
  })();

</script>
</head>
<body>
<div id="page_wrap" class="UserInfo">
<label>Select Month :</label>
<select id="monthselect"> </select>&nbsp;&nbsp;|&nbsp;&nbsp;
Welcome <%=userService.getCurrentUser().getNickname()%>&nbsp;&nbsp;|&nbsp;&nbsp;
<a href="<%=userService.createLogoutURL("http://detailedcalllogger.appspot.com/")%>">Logout</a>
</div>
<div class="Progress TopRightFixed" id="progress"><img
	src="images/ajax-loader.gif" alt="Loading" /> Loading ...</div>
<br />
<table class="tablesorter" id="mytable">
	<thead>
		<tr>
			<th>Number</th>
			<th>Name</th>
			<th>Date</th>
			<th>Duration</th>
			<th>Type</th>
		</tr>
	</thead>
	<tbody id="tabbody">
	</tbody>
</table>
<script type="text/javascript"><!--
google_ad_client = "ca-pub-1027539255344340";
/* CallLoggerAppAd */
google_ad_slot = "6008161425";
google_ad_width = 728;
google_ad_height = 90;
//-->
</script>
<script type="text/javascript"
	src="http://pagead2.googlesyndication.com/pagead/show_ads.js">
</script>
<!-- END List Wrap -->
</body>
</html>